<template>
  <h3>属性绑定</h3>
  <div :class="bindClass" >测试显示动态绑定样式</div>
  <button :disabled="clickBtn">这个是按钮</button>
  <div v-bind="bindList">批量绑定自定义属性</div>
  <div v-bind="bindSelfList">批量绑定系统属性</div>
</template>

<script>
export default {
  data() {
    return {
      bindClass: "appclass",
      //按钮是否不可以点击
      clickBtn: true,
      // 批量绑定属性
      bindList: {
        // 这里因为key是自定义的,所以绑定的属性就是自定义的
        dynamicClass: "bindClass",
        dynamicId: "bindId"
      },
      // 这里绑定系统属性,把key改为系统的class和id即可
      bindSelfList: {
        class: "bindSelfClass",
        id: "bindSelfId"
      }
    }
  }
}
</script>

<style>
.appclass {
  color: red;
  font-size: 30px;
}
</style>